<template>
  <div class="">
    <el-form :inline="true">
      <div style="display: flex; justify-content: space-between;">
        <div>
          <el-form-item>
            <el-input v-model="key" clearable placeholder="请输入查询内容" style="width: 200px;" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="state" placeholder="状态">
              <el-option label="全部" :value="0" />
              <el-option label="未使用" :value="1" />
              <el-option label="待发货" :value="2" />
              <el-option label="待签收" :value="3" />
              <el-option label="已签收" :value="4" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker v-model="dateTime" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getData">查询</el-button>
          </el-form-item>
        </div>
        <div>
          <el-button type="primary" :loading="exportLoading" @click="doExport">导出Excel</el-button>
        </div>
        <!-- <div>
          <download-excel class="export-excel-wrapper" :data="excelpage" :fields="json_fields" :name="fileName">
            <el-button type="primary">导出Excel</el-button>
          </download-excel>
        </div> -->
      </div>
    </el-form>
    <!-- 列表信息 -->
    <el-table v-loading="listLoading" :data="tableData" border style="width: 100%">
      <el-table-column prop="ckey" show-overflow-tooltip label="兑换码" width="180" align="center" />
      <el-table-column prop="gname" show-overflow-tooltip label="商品名称" align="center" />
      <el-table-column prop="picurl" label="商品封面" width="80" align="center">
        <template slot-scope="scope">
          <el-avatar shape="square" :size="50" :src="scope.row.picurl.split(',')[0]" />
        </template>
      </el-table-column>
      <el-table-column prop="gcount" show-overflow-tooltip label="商品数量" align="center" />
      <el-table-column prop="otime" show-overflow-tooltip label="过期时间" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.otime">{{ scope.row.otime.replace("T"," ") }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="rtime" show-overflow-tooltip label="领取时间" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.rtime">{{ scope.row.rtime.replace("T"," ") }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state==1">未使用</el-tag>
          <el-tag v-if="scope.row.state==2">待发货</el-tag>
          <el-tag v-if="scope.row.state==3">待签收</el-tag>
          <el-tag v-if="scope.row.state==4">已签收</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="username" show-overflow-tooltip label="使用者账号" align="center" />
      <el-table-column label="物流信息" width="120" align="center">
        <template slot-scope="scope">
          <el-popover placement="top-start" width="300" trigger="click">
            <div>
              <p>收货人：{{ scope.row.username }}</p>
              <p>联系方式：{{ scope.row.exp_phone }}</p>
              <p>收货地址：{{ scope.row.exp_address }}</p>
              <p v-if="scope.row.exp_code">物流单号：{{ scope.row.exp_code }}</p>
            </div>
            <div slot="reference" style="cursor:pointer">点击查看</div>
          </el-popover>
        </template>
      </el-table-column>
      <!-- 发货 -->
      <el-table-column label="操作" width="160px" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.state==2" size="mini" type="primary" @click="shipmentsVisibleFn(scope.row)">发货</el-button>
          <el-button v-if="scope.row.state==3" size="mini" type="primary" @click="openUrl(scope.row.exp_code)">查看物流</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :page-size="20" layout="prev, pager, next" :total="totalCount" @current-change="idx=>{pageIndex = idx}" />
    <el-dialog width="500px" :close-on-click-modal="false" title="物流信息" :visible.sync="shipmentsVisible">
      <el-form id="forms" ref="forms" :rules="rulesModel" :model="shipmentsForm" label-width="100px">
        <!-- <el-form-item label="快递公司" prop="comcode">
          <el-input v-model="shipmentsForm.comcode" placeholder="请填写快递公司" />
        </el-form-item> -->
        <el-form-item label="快递单号" prop="kdcode">
          <el-input v-model="shipmentsForm.kdcode" placeholder="请填写快递单号" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shipmentsVisible = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="shipments()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { CouponPage, Coupon_excel, CouponSetState } from '@/api/coupon.js'
export default {
  name: 'Name',
  data() {
    return {
      exportLoading: false,
      loading: false,
      key: '', // 关键词
      state: 0, // 订单状态
      dateTime: '', // 时间查询
      types: '-1',
      typeList: [],
      listLoading: false,
      tableData: [],
      totalCount: 0,
      pageIndex: 1,
      dialogVisible: false,
      shipmentsVisible: false, // 发货弹窗
      shipmentsForm: {}, // 发货信息
      rulesModel: {
        comcode: [
          { required: true, message: '请填写快递公司', trigger: 'blur' }
        ],
        kdcode: [{ required: true, message: '请填写快递单号', trigger: 'blur' }]
      },
      excelpage: [], // 存放用于导出excel的数据
      json_fields: {
        订单编号: {
          field: 'orderCode',
          callback: value => {
            return '&nbsp;' + value
          }
        },
        支付用户: 'username', // 支持嵌套属性
        订单金额: 'totalAmount',
        商品名称: 'gname',
        购买数量: 'buyCount',
        收货人: 'exp_username',
        收货人手机: 'exp_phone',
        收货地址: 'exp_address',
        订单时间: {
          field: 'ctime',
          callback: value => {
            return value.replace('T', ' ')
          }
        }
      },
      json_meta: [
        [
          {
            key: 'charset',
            value: 'utf-8'
          }
        ]
      ],
      iframeSrc: 'https://m.kuaidi100.com/result.jsp?nu=JDVA18145517038',
      kuaidi100Show: true
    }
  },
  computed: {
    // fileName() {
    //   return this.dateTime[0] + '-' + this.dateTime[1] + '订单列表.xlsx'
    // }
  },
  watch: {
    pageIndex(val) {
      this.getData()
    }
  },
  created() {

  },
  mounted() {
    this.getData()
  },
  methods: {
    openUrl(code) {
      window.open(
        `https://m.kuaidi100.com/result.jsp?nu=${code}`,
        '_blank'
      )
    },
    // 导出报表
    async doExport() {
      this.exportLoading = true
      const res = await Coupon_excel({
        key: this.key,
        state: this.state,
        userid: '',
        stime: this.dateTime ? this.dateTime[0] : '',
        etime: this.dateTime ? this.dateTime[1] : ''
      })
      this.exportLoading = false
      if (res) {
        // 转换数据类型
        const xlsx = 'application/vnd.ms-excel;charset=utf-8'
        const blob = new Blob([res], { type: xlsx })
        console.log(blob)
        // 转换完成，创建一个a标签用于下载
        const a = document.createElement('a')
        a.style.display = 'none'
        a.href = URL.createObjectURL(blob)
        let fileName
        if (this.dateTime) {
          fileName =
            this.dateTime[0] + '-' + this.dateTime[1] + '领取记录.xlsx'
        } else {
          fileName = '领取记录.xlsx'
        }
        a.setAttribute('download', fileName)
        document.body.appendChild(a)
        a.click()
        a.remove()
        // document.body.removeChild(a);
      }
    },
    shipmentsVisibleFn(item) {
      this.shipmentsForm = {
        comcode: '',
        kdcode: '',
        ...item
      }
      this.shipmentsVisible = true
    },
    async shipments() {
      const { success, msg } = await CouponSetState({
        couponid: this.shipmentsForm.id,
        expcode: this.shipmentsForm.kdcode
      })
      if (success) {
        this.getData()
        this.shipmentsVisible = false
      }
      this.$message({
        message: msg,
        type: success ? 'success' : 'error'
      })
    },
    async getData() {
      this.listLoading = true
      const { list, totalCount } = await CouponPage({
        key: this.key,
        gid: this.$route.query.gid,
        state: this.state,
        stime: this.dateTime ? this.dateTime[0] : '',
        etime: this.dateTime ? this.dateTime[1] : '',
        pageIndex: this.pageIndex,
        pageSize: 20
      })
      this.totalCount = totalCount
      this.tableData = list
      this.excelpage = list
      this.listLoading = false
    }
  }
}
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.el-table .warning-row {
  background: oldlace;
}
</style>
